<template>
	<view class="page">
		<fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
			<block slot="content">{{titleName}}</block>
		</fu-custom>

		<view class="warp">
			<!-- 消息内容循环 start -->
			<view class="list" @longtap="delMessage(item)" v-for="(item, index) in listData" :key="index">

				<!-- 系统公告 -->
				<view class="consult" @click="lookInfo(item)" v-if="name=='系统消息'">
					<view class="image" v-if="item.thumb">
						<fu-image :src="item.thumb" :mode="'heightFix'"></fu-image>
					</view>
					<view class="desc">
						<view class="title ">{{ item.title || i18n["暂无标题"] }}</view>
						<view class="content margin-top-sm " :class="name=='系统消息'?'':'text-cut-2'">
							{{item.content || i18n['无具体内容']}}
						</view>
						<view class="times">
							<text class="text">{{ item.create_time || item.add_time }}</text>
						</view>
					</view>
				</view>
				<!-- 平台消息 -->
				<view class="flex algin-center bg-white padding-sm radius-16  margin-bottom-sm margin-top" @click="lookInfo(item)" v-if="name=='平台'">
					<!-- <view class="fu-block-160 flex-shrink margin-right-sm overHidden radius-16" v-if="item.thumb">
						<fu-image :src="item.thumb" :mode="'aspectFill'"></fu-image>
					</view> -->
					<view class="flex justify-between flex-direction  w100">
						<view class="text-cut">{{ item.title || i18n["暂无标题"] }}</view>
						<view class="content margin-top-sm text-cut-2" >
							{{item.content || i18n['无具体内容']}}
						</view>
						<view class="text-sm text-999 text-right padding-top ">
							<text class="text text-right">{{ item.create_time || item.add_time }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 消息内容循环 end -->
			<!-- 分页组件 start-->
			<fu-empty :paging-list-loaded-all="pagingListLoadedAll" :paging-list-no-list-data="pagingListNoListData"
				:list-data-length="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
			<!-- 分页组件 end-->
			<!-- 网络监测 start -->
			<fu-notwork></fu-notwork>
			<!-- 网络监测  end-->
		</view>
	</view>
</template>
<script>
	// import { checkImgExists  } from '@/commmon/utils/utils';
	import pagingList from "@/common/mixin/paging_list.js"; //混合开发 请求数据
	export default {
		mixins: [pagingList],
		data() {
			return {
				titleName: global.i18n["平台消息"],
				minixPagingListsApi: global.apiUrls.postOperationGetColumnArticleList, //列表请求地址
				allowOnloadGetList: false, //是否允许请求
				pageingListApiMethod: "post", //请求方式
				msg_type: 0, //消息类型
				name: '', //标题
			};
		},
		/**
		 * @description 页面初始化
		 * @param {Object} e  msg_type:消息类型id,  name:消息类型名称
		 *
		 */
		onLoad(e) {
			this.msg_type = e.id || 0;
			this.name = e.name
			// 其他通知 无详情 调用系统消息接口
			if (e.name == '平台') {
				this.pageingListApiMethod = "post";
				this.minixPagingListsApi = global.apiUrls.postPlatfromMessage;
			} else {
				this.setSysTitle(e); //设置系统导航名称
				if (this.msg_type) {
					this.pageingListApiMethod = "get";
					this.minixPagingListsApi = global.apiUrls.getOperationGetSystemMsgList;
				}

			}


			// this.allowOnloadGetList = true;
			// this.pagingListGetLists(); //获取数据 调用混用开发里面的方法
		},
		onShow() {
			this.pagingListToggle();
		},
		onPullDownRefresh() {
			this.pagingListToggle();
		},
		methods: {
			/**
			 *@description 查看详情 
			 */
			lookInfo(item) {
				console.log(this.name, item, item.custom);
				if (this.name == '系统消息' && item.custom != '') {
					// 系统消息 custom 有值才可以跳转/
					// custom: "{\"type\":\"refund\",\"id\":1}",  表示跳转到售后详情页，售后单ID为1  order 是进入普通订单详情  id 是订单号
					let url = '';
					if (item.type == 'refund') {
						url = '/pages/order/afterorder/afterorder-detail/index'
					} else if (item.type == 'order') {
						url = '/pages/order/orderdetail/order-detail/index'
					}
					this.$urouter.navigateTo({
						url: url,
						params: {
							id: item.id,
						}
					})
				}else if(this.name == '系统消息'&& item.custom == ''){
					return
				} else {
					// 其他消息 平台公告
					this.$urouter.navigateTo({
						url: '/pages/service-message/message/message-detail/index',
						params: {
							id: item.id,
						}
					})
				}

			},
			/**
			 * @description 删除消息
			 * @param {Object} item  id:消息id唯一标识
			 */
			delMessage(item) {
				this.$util.showModal({
					title: this.i18n["提示"],
					content: this.i18n["确定删除此消息？"],
					success: (data) => {
						if (data.confirm) {
							this.$api
								.post(global.apiUrls.postOperationDelSystemMsg, {
									id: item.id,
									msg_type: this.msg_type
								})
								.then((res) => {
									if (res.data.code == 1) {
										this.pagingListToggle(); //刷新列表
									} else {
										this.$message.info(res.msg);
									}
								});
						} else if (data.cancel) {
							// console.log('用户点击取消');
						}
					},
				});
			},
			/**
			 * 设置系统导航名称
			 * @param {Object} e name: 消息类型
			 */
			setSysTitle(e) {
				this.titleName = e.name;
				uni.setNavigationBarTitle({
					title: e.name || this.i18n["系统通知"],
				});
			},

			/**
			 * 请求分页接口时加入额外参数
			 */
			pagingListPostData() {
				return {
					msgtype: this.msg_type,
					page_size: 15,
					category_id:7
				};
			},
		},
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		font-size: 28upx;
		background: #f9f9f9;

		.warp {
			padding: 0 32rpx 32rpx;

			// 消息列表循环 start
			.list {
				.times {
					text-align: right;
					margin-top: 32rpx;

					.text {
						width: 216rpx;
						height: 33rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 29rpx;
						color: #999999;
						opacity: 1;
					}
				}

				.consult {
					margin: 25upx 0;
					// padding: 25upx  0;
					width: 100%;
					border-radius: 16rpx;
					background: #fff;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					color: #999;

					.image {
						height: 320rpx;
						width: 100%;
						border-radius: 16rpx 16rpx 0 0;
						padding-bottom: 20rpx;
						overflow: hidden;
					}

					.desc {
						padding: 24rpx;

						.title {
							/* height: 45rpx; */
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 500;
							line-height: 36rpx;
							color: #333333;
						}

						.content {
							// height: 40rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 44rpx;
							color: #666666;
						}
					}
				}
			}

			// 消息列表循环 end
		}
	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		background: #fff;
		margin: 16upx 16upx 0 16upx;
		border-radius: 16rpx;

		.i-top {
			display: flex;
			align-items: center;
			height: 80upx;
			padding-right: 30upx;
			font-size: 28rpx;
			color: #333333;
			position: relative;

			.time {
				flex: 1;
			}

			.del-btn {
				padding: 10upx 0 10upx 36upx;
				font-size: 24rpx;
				color: #f8f8f8;
				position: relative;

				&:after {
					content: "";
					width: 0;
					height: 30upx;
					border-left: 1px #cccccc;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		/* 多条商品 */
		.goods-box {
			height: 160upx;
			padding: 20upx 0;
			white-space: nowrap;

			.goods-item {
				width: 120upx;
				height: 120upx;
				display: inline-block;
				margin-right: 24upx;
			}

			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
				background-color: #eeeeee;
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 10upx 0;

			.goods-img {
				display: block;
				width: 150upx;
				height: 150upx;
				background-color: #eeeeee;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				overflow: hidden;

				.attr-box {
					font-size: 24rpx;
					color: #f8f8f8;
					padding: 10upx 12upx;
				}
			}

			.order-desc {
				height: 150upx;
				font-size: 30rpx;
				line-height: 50rpx;
				width: 95%;
				padding-left: 10rpx;
				padding-top: 10rpx;
				background-color: #fcf9fc;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>
